<template>
  <div class="date-section">
    <div class="date-header">
      <div class="date-divider"></div>
      <span class="date-text">{{ formattedDate }}</span>
      <div class="date-divider"></div>
    </div>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { formatGroupDate } from '@/utils/fileUtils'

const props = defineProps({
  date: {
    type: String,
    required: true
  }
})

// 使用工具函数格式化日期
const formattedDate = computed((): string => {
  return formatGroupDate(props.date)
})
</script>

<style scoped>
.date-section {
  margin-bottom: 24px;
}

.date-header {
  display: flex;
  align-items: center;
  margin: 16px 0;
}

.date-divider {
  flex: 1;
  height: 1px;
  background-color: var(--theme-border-light);
}

.date-text {
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--theme-text-secondary);
  white-space: nowrap;
}
</style>
